<script lang="ts">
  let input1 :number
  let input2 :number
  let currency1: string
  let currency2: string

  async function fetchUrl(value: string) {
    const data = await fetch(`https://open.er-api.com/v6/latest/${value}`)
    const dataJson = await data.json()
    return dataJson
  }

  async function changeHandler(event: Event) {
    const inputElement = event.target as HTMLInputElement;
    let chench = await fetchUrl(currency1)
    let obj = chench.rates
    input1 = Number((Number(inputElement.value) * obj[currency2]).toFixed(2));
  }
  
  async function changeHandler2(event: Event) {
    const inputElement = event.target as HTMLInputElement;
    let chench = await fetchUrl(currency2)
    let obj = chench.rates
    input2 = Number((Number(inputElement.value) * obj[currency1]).toFixed(2));
  }

</script>
<select bind:value={currency1}>
  <option value="USD">Доллар США</option>
  <option value="EUR">Евро</option>
  <option value="RUB">Рубль</option>
  <option value="AED">Арабский дирхам</option>
  <option value="CNY">Юань</option>
  <option value="BYN">Белорусский рубль</option>
</select>
<input type='number' bind:value={input2} on:input={changeHandler}/>
<select bind:value={currency2}>
  <option value="USD">Доллар США</option>
  <option value="EUR">Евро</option>
  <option value="RUB">Рубль</option>
  <option value="AED">Арабский дирхам</option>
  <option value="CNY">Юань</option>
  <option value="BYN">Белорусский рубль</option>
</select>
<input type="number" bind:value={input1} on:input={changeHandler2}/>

